//系统-消息
import React, { Component } from 'react';
import {
    View,
    Text,
    TouchableOpacity,
    TextInput
} from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons';
import { password_Style as styles } from '../../../../../styles';
import { UpdatePasswordAction } from '../../../../actions/systemAction'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { myAlert } from '../../../../util/compatible';

var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;

class Password_body extends Component {

    oldpassword = false;
    newpassword = false;

    constructor(props) {
        super(props);
        this.state = ({
            //密码显示与隐藏  true为显示 false为隐藏
            show1: true,
            show2: true,
            //登录按钮是否可用
            isOk: false,
            //是否等待
            isloading: false
        });
    }

    //显示密码时,输入框光标消失
    //原密码
    _showOldPas() {
        this.refs.oldpassword.blur();
    }

    //新密码
    _showNewPas() {
        this.refs.newpassword.blur();
    }

    goLogin() {
        if (this.state.isOk) {
            this.setState({ isloading: true });
            this.setState({ isOk: false });
            this.props.actions.UpdatePasswordAction({
                oldPassword: this.refs.oldpassword._lastNativeText,
                newPassword: this.refs.newpassword._lastNativeText
            });
        }
    }

    isOKN(val) {
        if (val.length > 2) {
            this.oldpassword = true;
        } else {
            this.oldpassword = false;
        }
        this.isOk();
    }

    isOk() {
        if (this.oldpassword && this.newpassword) {
            this.setState({ isOk: true });
        } else {
            this.setState({ isOk: false });
        }
    }

    isOKP(val) {
        if (val.length > 2) {
            this.newpassword = true;
        } else {
            this.newpassword = false;
        }
        this.isOk();
    }

    componentWillReceiveProps(nextProps) {
        const { data } = nextProps.msg
        if (data.msg != "") {
            //登录成功
            if (data.msg == "ok") {
                this.props.navigation.goBack();
            } else {
                //失败弹出消息
                myAlert(data.msg);
            }
            this.setState({ isOk: false, isloading: false })
        }
    }

    render() {
        return (
            <View style={styles.pass_all}>

                <View style={styles.input}>
                    <TextInput
                        style={[styles.inputin, { width: width * 0.85 }]}
                        ref="oldpassword"
                        placeholder="请输入原密码"
                        password={true}
                        //输入为密码隐藏样式
                        secureTextEntry={this.state.show1}
                        clearButtonMode="always"
                        underlineColorAndroid="transparent"
                        onChangeText={this.isOKN.bind(this)}
                    />

                    <TouchableOpacity style={styles.look} activeOpacity={1}
                        onPressIn={() => { [this.setState({ show1: !this.state.show1 }), this._showOldPas()] }}
                        onPressOut={() => { this.setState({ show1: !this.state.show1 }) }}>
                        <Icon
                            name={'md-eye'}
                            size={22}
                            color={'#aeaeae'} />
                    </TouchableOpacity>
                </View>

                <View style={styles.input}>
                    <TextInput
                        style={[styles.inputin, { width: width * 0.85 }]}
                        ref="newpassword"
                        placeholder="请输入新密码（6-16位字母、数字）"
                        password={true}
                        //输入为密码隐藏样式
                        secureTextEntry={this.state.show2}
                        clearButtonMode="always"
                        underlineColorAndroid="transparent"
                        onChangeText={this.isOKP.bind(this)}
                    />

                    <TouchableOpacity style={styles.look} activeOpacity={1}
                        onPressIn={() => { [this.setState({ show2: !this.state.show2 }), this._showNewPas()] }}
                        onPressOut={() => { this.setState({ show2: !this.state.show2 }) }}>
                        <Icon
                            name={'md-eye'}
                            size={22}
                            color={'#aeaeae'} />
                    </TouchableOpacity>
                </View>

                <TouchableOpacity
                    activeOpacity={1}
                    style={
                        this.state.isOk ?
                            [styles.buttonall, {
                                width: width * 0.85,
                                elevation: 3,
                                shadowColor: 'black',
                                shadowOpacity: 1,
                                shadowRadius: 5
                            }]
                            :
                            [styles.buttonall, {
                                backgroundColor: "#aeaeae",
                                width: width * 0.85,
                                elevation: 3,
                                shadowColor: 'black',
                                shadowOpacity: 1,
                                shadowRadius: 5
                            }]
                    }
                    underlayColor={this.state.isOk ? "#3D9CCC" : "#aeaeae"} onPress={this.goLogin.bind(this)}>
                    <Text style={{ color: '#fff', fontSize: 13, fontFamily: "msyh" }}>
                        {this.state.isloading ? "等  待" : "提  交"}
                    </Text>
                </TouchableOpacity>

            </View>
        )
    }
}

//组合action
var actions = {
    UpdatePasswordAction
}
//连接state到props
const mapStateToProps = state => {
    return {
        msg: state.UpdatePasswordReducer
    }
}
//连接action
const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators(actions, dispatch)
    }
}
//导出组合好的组件(组合后状态改变重新渲染组合组件的页面)
export default connect(
    mapStateToProps, mapDispatchToProps
)(Password_body);